<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>详情信息</span>
          </div>
          <div  v-loading="detailLoading">
            <div style="text-align: center">
              <div class="el-upload">
                <el-avatar shape="square" :size="200" fit="fit" :src="defaultUrl"></el-avatar>
              </div>
            </div>
            <ul class="user-info">
              <li><div style="height: 100%">设备编号<div class="user-right">{{eqInf.deviceCode}}</div></div></li>
              <li>设备名称 <div class="user-right">{{eqInf.deviceName}}</div></li>
              <li>设备类型 <div class="user-right">{{ dict.label.device_type[eqInf.deviceType] }}</div></li>
              <li>设备型号 <div class="user-right">{{eqInf.deviceModel}}</div></li>
              <li>在线状态<div class="user-right"> <el-tag :type="getisOnlineColor(eqInf)">{{ dict.label.is_online[eqInf.isOnline] }}</el-tag> </div></li>
              <li>运行状态<div class="user-right">
                <el-tag :type="getStatusColor(eqInf)">
                  {{ dict.label.device_status[eqInf.deviceStatus] }}
                </el-tag>
              </div></li>
              <li>报警代码<div class="user-right">{{eqInf.alarmCode}}</div></li>
              <li>所在产线<div class="user-right">{{eqInf.lineCode}}</div></li>
              <li>所在工段<div class="user-right">{{eqInf.sectionCode}}</div></li>
              <li>所在工位<div class="user-right">{{eqInf.stationCode}}</div></li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-card class="box-card step-card" style="overflow:hidden;">
              <div slot="header" class="clearfix" style="padding: 0px">
                <span>运行趋势</span>
                <div style="float: right;">
                  <el-button class="hide_input" size="mini">
                    日<i class="el-icon-arrow-down el-icon--right"></i>
                    <el-date-picker
                      @change="trendDayChenge"
                    v-model="dateCondition.trendDay"
                    type="date"
                    value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-button>

                  <el-button class="hide_input" size="mini">
                    月<i class="el-icon-arrow-down el-icon--right"></i>
                    <el-date-picker
                      @change="trendMonthChenge"
                      v-model="dateCondition.trendMonth"
                      type="month"
                      value-format="yyyy-MM">
                    </el-date-picker>
                  </el-button>
                </div>
              </div>
              <div v-loading="trendLoading">
                <FailLineChart :chartData=trendData></FailLineChart>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card step-card" style="overflow:hidden;">
              <div slot="header" class="clearfix">
                <span>正常和故障</span>
                <div style="float: right;">
                  <el-button class="hide_input" size="mini">
                    日<i class="el-icon-arrow-down el-icon--right"></i>
                    <el-date-picker
                      @change="propDayChenge"
                      v-model="dateCondition.propDay"
                      type="date"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-button>

                  <el-button class="hide_input" size="mini">
                    月<i class="el-icon-arrow-down el-icon--right"></i>
                    <el-date-picker
                      @change="propMonthChenge"
                      v-model="dateCondition.propMonth"
                      type="month"
                      value-format="yyyy-MM">
                    </el-date-picker>
                  </el-button>
                </div>
              </div>
            <FailPieChart :dataArray="alarmList" ></FailPieChart>
            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card class="box-card">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="运行记录" name="run">
                  <StatusRecord ref="run"></StatusRecord>
                </el-tab-pane>
                <el-tab-pane label="报警记录" name="alarm">
                  <AlarmRecord ref="alarm"></AlarmRecord>
                </el-tab-pane>
                <el-tab-pane label="开关机记录" name="open">
                  <OnlineRecord ref="open"></OnlineRecord>
                </el-tab-pane>
                <el-tab-pane label="停机记录" name="stop">
                  <StopRecord ref="stop"></StopRecord>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudDeviceStatus from '@/api/device/deviceStatus'
  import device from '@/assets/images/device1.png'
  import FailPieChart from '@/components/Echarts/EQPieChart'
  import FailLineChart from '@/components/Echarts/LineChart'
  import StatusRecord from './module/status'
  import StopRecord from './module/stop'
  import AlarmRecord from './module/alarm'
  import OnlineRecord from './module/online'
  import { initData } from '@/api/data'
  import { mapGetters } from 'vuex'
  const defaultForm = { id: null, deviceCode: null, deviceName: null, lineCode: null, sectionCode: null, stationCode: null, deviceStatus: null, tripTime: null, createBy: null, createTime: null, updateBy: null, updateTime: null }

  export default {
  name: 'DeviceMonitorDetail',
  dicts: ['product_type','device_type','is_online','device_status'],
  computed: {
  ...mapGetters([
      'baseApi'
    ])
  } ,
  components: { FailPieChart ,FailLineChart, StatusRecord, StopRecord, AlarmRecord, OnlineRecord },
  data() {
    return {
      detailLoading : false,
      trendLoading : false,
      defaultUrl: device,
      eqInf:defaultForm,
      activeName: 'run',
      trendData: {},
      alarmList:[
        { value: 0, name: '正常' },
        { value: 0, name: '故障' }
      ],
      dateCondition:{
        trendDay: '',
        trendMonth: '',
        propDay: '',
        propMonth: '',
        alarmDay: '',
        alarmMonth: ''
      }
    }
  },
  methods: {
    //获取当前时间
    getDate() {
      let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        strDate = date.getDate(),
        seperator1 = "-";

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      return year + "-" + month + "-" + strDate;
    },
    //切换Tab
    handleClick(tab) {
      if(this.eqInf && this.eqInf.id){

        if(tab.name == 'run'){
          //运行
          this.$refs.run.queryPage(this.$route.params.id);
        }else if(tab.name == 'alarm'){
          //报警
          this.$refs.alarm.queryPage(this.$route.params.id);
        }else if(tab.name == 'open'){
          //开关机
          this.$refs.open.queryPage(this.$route.params.id);
        }else if(tab.name == 'stop'){
          //停机
          this.$refs.stop.queryPage(this.$route.params.id);
        }
      }
    },
    trendDayChenge(value){
      this.trendLoading = true;
      crudDeviceStatus.getTrend(
        {
          deviceCode: this.eqInf.deviceCode,
          trendDay:value
        }
      ).then( res =>{
        this.trendLoading = false;

        this.trendData = res;
      }).error(err =>{
        this.trendLoading = false;
      })
    },
    trendMonthChenge(value){
      this.trendLoading = true;
      crudDeviceStatus.getTrend({
        deviceCode: this.eqInf.deviceCode,
        trendMonth:value}).then( res =>{
        this.trendLoading = false;

        this.trendData = res;
      }).error(err =>{
        this.trendLoading = false;
      })
    },
    propDayChenge(value){
      console.log(value);
    },
    propMonthChenge(value){
      console.log(value);
    },
    getisOnlineColor(item){
      if(item.isOnline == '0' || item.isOnline == 'FALSE'){
        return 'info';
      }else{
        return '';
      }
    },
    getStatusColor(item){
      if(item.deviceStatus == '1' ){
        return 'success';
      }else if(item.deviceStatus == '2'){
        return 'primary';
      }else if(item.deviceStatus == '3'){
        return 'warning';
      }else if(item.deviceStatus == '4'){
        return 'danger';
      }else if(item.deviceStatus == '5'){
        return 'warning';
      }else if(item.deviceStatus == '6'){
        return 'info';
      }
    }
  },
  mounted() {
    this.detailLoading = true;
    const deviceCode = this.$route.params.id
    initData('api/deviceMain/monitor', {
      page: 0,
      size: 1,
      sort: 'id,desc',
      deviceCode: deviceCode
    }).then(data => {
      this.detailLoading = false;
      if(data && data.content){
        this.eqInf = data.content[0];
        //图片
        if(this.eqInf.url){
          this.defaultUrl = this.baseApi + '/' +  this.eqInf.url;
        }else{
          this.defaultUrl = device;
        }

        //加载趋势图
        this.trendDayChenge(this.getDate());
      }
    }).catch(err => {
      this.detailLoading = false;
    })


    this.$refs.run.queryPage(this.$route.params.id);
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .user-info {
    padding-left: 0;
    list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      padding: 11px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
      a{
        color: #317EF3;
      }
    }
  }

</style>
<style type="text/css" scoped>
  .hide_input{
    position: relative !important;
  }
  .hide_input .el-date-editor {
    position: absolute ;
  top: 0 ;
    left: 0 ;
    opacity: 0;
  }
</style>
